<template>
	<view>
		<UserInfoCard></UserInfoCard>

		<view class='page-container'>
			<view class="operate-title between-center">
				<view class="start-center pad-16r">
					<image class="operate-img" src="/static/images/imgs/shoushu-status.png"></image>
					<view class="operate-status-name">手术状态</view>
				</view>
				<view>
					<view v-if="dataSource.jlzt==0" class="operate-status">未安排</view>
					<view v-if="dataSource.jlzt==1" class="operate-status">已安排</view>
					<view v-if="dataSource.jlzt==2" class="operate-status">已完成</view>
					<view v-if="dataSource.jlzt==3" class="operate-status">病区取消</view>
					<view v-if="dataSource.jlzt==4" class="operate-status">手术室取消</view>
				</view>
			</view>
			<view class="operate-lianjie">
				<image class="img-operate-lianjie" src="/static/images/imgs/operate-detail-lianjie.png"></image>
				<image class="img-operate-lianjie" src="/static/images/imgs/operate-detail-lianjie.png"></image>
			</view>
			<view class="operate-hzxx">
				<view class="start-center">
					<image class="operate-img" src="/static/images/imgs/operate-detail-hzxx.png"></image>
					<view class="operate-hzxx-title">住院人信息</view>
				</view>
				<view>
					<view class="operate-hzxx-row">
						<view class="operate-hzxx-row-title">住院患者：</view>
						<view class="operate-hzxx-row-content">{{dataSource.hzxm}}</view>
					</view>
					<!-- 			<view class="operate-hzxx-row">
						<view class="operate-hzxx-row-title">住院号：</view>
						<view class="operate-hzxx-row-content">{{dataSource.apczyh}}</view>
					</view> -->
					<view class="operate-hzxx-row" v-if="dataSource.campusName">
						<view class="operate-hzxx-row-title">住院院区：</view>
						<view class="operate-hzxx-row-content">{{dataSource.campusName}}</view>
					</view>
					<view class="operate-hzxx-row">
						<view class="operate-hzxx-row-title">住院科室：</view>
						<view class="operate-hzxx-row-content">{{dataSource.ksmc}}</view>
					</view>
					<view class="operate-hzxx-row">
						<view class="operate-hzxx-row-title">住院病区：</view>
						<view class="operate-hzxx-row-content">{{dataSource.bqmc}}</view>
					</view>
					<view class="operate-hzxx-row">
						<view class="operate-hzxx-row-title">入院日期：</view>
						<view class="operate-hzxx-row-content">{{dataSource.djrq}}</view>
					</view>
					<view class="operate-hzxx-row" v-if="dataSource.bqsm">
						<view class="operate-hzxx-row-title">诊断信息：</view>
						<view class="operate-hzxx-row-content">{{dataSource.bqsm}}</view>
					</view>
				</view>
			</view>
			<view class="operate-lianjie">
				<image class="img-operate-lianjie" src="/static/images/imgs/operate-detail-lianjie.png"></image>
				<image class="img-operate-lianjie" src="/static/images/imgs/operate-detail-lianjie.png"></image>
			</view>
			<view class="operate-hzxx">
				<view class="start-center">
					<image class="operate-img" src="/static/images/imgs/operate-detail-ssxx.png"></image>
					<view class="operate-hzxx-title">手术信息</view>
				</view>
				<view>
					<view class="operate-hzxx-row">
						<view class="operate-hzxx-row-title">手术名称：</view>
						<view class="operate-hzxx-row-content">{{dataSource.ssmc}}</view>
					</view>
					<view class="operate-hzxx-row">
						<view class="operate-hzxx-row-title">主刀医生：</view>
						<view class="operate-hzxx-row-content">{{dataSource.zgmc}}</view>
					</view>
					<view class="operate-hzxx-row" v-if="dataSource.aprq">
						<view class="operate-hzxx-row-title">手术日期：</view>
						<view class="operate-hzxx-row-content">{{dataSource.aprq}}</view>
					</view>
					<view class="operate-hzxx-row">
						<view class="operate-hzxx-row-title">麻醉方式：</view>
						<view class="operate-hzxx-row-content">{{dataSource.mzmc}}</view>
					</view>
					<view class="operate-hzxx-row" v-if="dataSource.roomno">
						<view class="operate-hzxx-row-title">手术室：</view>
						<view class="operate-hzxx-row-content">{{dataSource.roomno}}</view>
					</view>
					<view class="operate-hzxx-row" v-if="dataSource.tw">
						<view class="operate-hzxx-row-title">体位：</view>
						<view class="operate-hzxx-row-content">{{dataSource.tw}}</view>
					</view>
				</view>
			</view>
		</view>
		<ButtonVue content="刷新状态" v-if="statusFresh"></ButtonVue>
	</view>

</template>
<script>
	import UserInfoCard from '../../../components/UserInfo/UserInfoCard.vue';
	import {
		mapGetters,
	} from 'vuex'
	import {
		inHospitalOperate
	} from '../../../api/inHospital';
	import {
		dateFormat,
		getPastDate
	} from '../../../utils/assist';
	import {
		dictionarySelect
	} from '../../../api/dictionary';
	export default {
		components: {
			UserInfoCard,
		},
		computed: {
			...mapGetters(["userInfo"]),
		},
		data() {
			return {
				isRecord: true,
				activeDate: '1m',
				statusFresh: false,
				beginTime: '',
				endTime: '',
				dataSource: []
			}
		},
		onLoad(e) {
			if (e.item) {
				this.dataSource = JSON.parse(e.item)
				this.dataSource.djrq = dateFormat("yyyy-MM-dd", new Date(this.dataSource.djrq))
				this.dataSource.aprq = dateFormat("yyyy-MM-dd", new Date(this.dataSource.aprq))
			}
			this.init()
			console.log(this.dataSource)
		},
		mounted() {


		},
		methods: {
			init() {
				dictionarySelect({
					code: 'SetOperateStatusFresh',
					status: 1
				}).then(res => {
					console.log(res)
					if (res.length > 0) {
						this.statusFresh = res[0].describe == 1
					}
				})
			},

		}
	}
</script>
<style lang='scss' scoped>
	.page-container {
		padding: 16rpx;
	}

	.operate-title {
		background-image: url("/static/images/imgs/shoushu-title.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 50px;
	}

	.operate-img {
		width: 16px;
		height: 16px;
	}

	.operate-status-name {
		padding: 5px;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		color: #2E6D78;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.operate-status {
		padding: 5px 10px;
		background: #BAF6FA;
		border-radius: 61px 0px 0px 61px;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		color: #2E6D78;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.operate-lianjie {
		margin: -8px 0 -8px 0;
		display: flex;
		justify-content: space-between;
	}

	.img-operate-lianjie {
		width: 9px;
		height: 36px;
		margin: 0 16rpx;
	}

	.operate-hzxx {
		background: #F6F6F6;
		border-radius: 8px 8px 8px 8px;
		padding: 16rpx;
	}

	.operate-hzxx-title {
		margin: 10px 0;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 500;
		font-size: 16px;
		color: #333333;
		line-height: 40px;
		height: 40px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.operate-hzxx-row {
		line-height: 40px;
		height: 40px;
		display: flex;
		justify-content: flex-start;
	}

	.operate-hzxx-row-title {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #a7a7a7;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.operate-hzxx-row-content {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #666666;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
</style>